<!-- 报警处理表单 -->
<template>
	<section class="eventForm">
		<ul>
			<li>报警地点： {{ getAddress(props.curAlarm) }}</li>
			<li>报警时间： {{ props.curAlarm.createdAt }}</li>
			<li>报警类型： {{ eventMap[props.curAlarm.eventType] }}</li>
		</ul>
		<el-divider style="margin: 10px 0"></el-divider>

		<div v-if="props.type == 'done'" style="line-height: 30px">
			<div>处理结果：{{ handleMap[props.curAlarm.handleType] }}</div>
			<div>处理备注：{{ props.curAlarm.handleRemark }}</div>
		</div>

		<template v-if="props.type == 'undone'">
			<el-button :type="state.handleType == 2 ? 'primary' : ''" @click="state.handleType = 2" size="small">无需处理</el-button>
			<el-button
				:type="state.handleType == 1 ? 'primary' : ''"
				@click="
					state.handleType = 1;
					state.form.handleRemark = '';
				"
				size="small"
				>处理</el-button
			>

			<el-radio-group v-model="state.ignoreValue" v-if="state.handleType == 2" @change="ignoreValueChange">
				<el-radio label="1">误报</el-radio>
				<el-radio label="2">无需处理</el-radio>
				<el-radio label="3">其它</el-radio>
			</el-radio-group>

			<el-input
				class="msgBox"
				v-model="state.form.handleRemark"
				type="textarea"
				placeholder="请填写处理方式"
				:rows="6"
				maxlength="255"
				show-word-limit
			></el-input>

			<div class="formFoot">
				<el-button type="primary" @click="handleAlarm">立即处理</el-button>
			</div>
		</template>
	</section>
</template>

<script lang="ts" setup name="EventForm">
import { onMounted, reactive } from 'vue';
import { useSmoke } from '/@/hook/index';
const { getAddress, getFileUrl } = useSmoke();
import alarmApi from '/@/api/smoke/alarm';
import { ElMessage } from 'element-plus';

const emit = defineEmits(['done']);
const props = defineProps({
	curAlarm: {
		type: Object,
		default: () => {
			return {};
		},
	},

	type: {
		type: String,
		default: 'undone', // done undone
	},
});

onMounted(() => {
	if (props.type == 'done') {
		state.form.handleRemark = props.curAlarm.handleRemark;
	}
});

// 1：烟雾报警，2：人员停留，4：温感报警
const eventMap: any = {
	1: '火焰/烟雾',
	2: '人员停留',
	4: '温感报警',
};

// 处理类型 1：人工处理， 2：忽略
const handleMap: any = {
	1: '人工处理',
	2: '忽略',
};

const state = reactive({
	handleType: 2,
	ignoreValue: '',
	form: {
		handleRemark: '',
	},
});

function ignoreValueChange(value: string) {
	switch (value) {
		case '1':
			state.form.handleRemark = '误报';
			break;

		case '2':
			state.form.handleRemark = '无需处理';
			break;

		case '3':
			state.form.handleRemark = '';
			break;
	}
}

function handleAlarm() {
	let params = {
		eventId: props.curAlarm.eventId,
		handleType: state.handleType,
		handleRemark: state.form.handleRemark,
	};

	alarmApi.haneleAlarm(params).then((res: any) => {
		if (res.code == 0) {
			ElMessage.success('已处理');
			emit("done")
		}
	});
}
</script>
<style lang="scss" scoped>
.eventForm {
	padding: 10px;
	height: 100%;

	ul {
		background-color: #fef0f0;
		padding: 10px;
		list-style: none;
		line-height: 24px;
	}
	.msgBox {
		margin-top: 10px;
	}

	.el-radio-group {
		display: block;
		margin-top: 10px;
	}

	.formFoot {
		display: flex;
		padding-top: 10px;

		.el-button {
			margin-left: auto;
		}
	}
}
</style>
